<template>
  <el-dialog
    v-dialogDrag
    :visible="popupsVisible"
    :title="titleName"
    center
    width="70%"
    top="2rem"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="closeEdit"
  >
    <dialogHeader slot="title" :title="titleName" :style-type="$store.state.app.dialogType" />
    <div class="filter-container filter-params">
      <!-- 表单组件 -->
      <mix-form
        ref="multipleForm"
        :dynamic-form-fields="dynamicFormFields"
        :dynamic-fields-data="dataForForm"
      />
      <!-- 按钮组件 -->
      <mix-button
        class="app-common-mar"
        :dynamic-buttons="dynamicButtons"
        :dynamic-components="dynamicFormFields"
        :template-type="true"
      />
    </div>
  </el-dialog>
</template>

<script>
import dialogHeader from '@/components/dialogHeader'
import mixForm from '@/components/basicComponent/mixForm'
import mixButton from '@/components/basicComponent/mixButton'
import { orgApis } from '@/api/vesalesapi.js'
export default {
  components: {
    mixForm,
    mixButton,
    dialogHeader
  },
  props: {
    popupsVisible: {
      type: Boolean,
      default: false
    },
    dataForForm: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      titleName: '驳回原因填写',
      // 动态组件-查询条件
      dynamicFormFields: [
        {
          compKey: 'compKey1',
          label: '关联订单号：',
          codeField: 'associatedOrder',
          isComponent: true,
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          sendCode: () => { },
          focusCode: () => { },
          changeCode: (val) => {
            this.dynamicFieldsData.associatedOrder = val
          },
          span: 8
        },
        {
          compKey: 'compKey2',
          span: 8,
          isComponent: true,
          label: '变更前交门店：',
          codeField: 'oldDlrName',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          sendCode: () => { },
          focusCode: () => { },
          changeCode: (val) => {
            this.dynamicFieldsData.oldDlrName = val
          },
          isMust: true
        },
        {
          compKey: 'compKey3',
          span: 8,
          isComponent: true,
          label: '变更前交仓库：',
          codeField: 'oldCarHouseName',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          sendCode: () => { },
          focusCode: () => { },
          changeCode: (val) => {
            this.dynamicFieldsData.oldCarHouseName = val
          },
          isMust: true
        },
        {
          compKey: 'compKey4',
          span: 8,
          isComponent: true,
          label: '交付地变更原因说明：',
          disabled: true,
          codeField: 'jfdReason',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          sendCode: () => { },
          focusCode: () => { },
          changeCode: (val) => {
            this.dynamicFieldsData.jfdReason = val
          },
          isMust: true
        },
        {
          compKey: 'compKey5',
          span: 8,
          isComponent: true,
          label: '变更后交付门店：',
          disabled: true,
          codeField: 'newDlrName',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          sendCode: () => { },
          focusCode: () => { },
          changeCode: (val) => {
            this.dynamicFieldsData.newDlrName = val
          },
          isMust: true
        },
        {
          compKey: 'compKey6',
          span: 8,
          isComponent: true,
          label: '变更后交付仓库：',
          disabled: true,
          codeField: 'newCarHouseName',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          sendCode: () => { },
          focusCode: () => { },
          changeCode: (val) => {
            this.dynamicFieldsData.newCarHouseName = val
          },
          isMust: true
        },
        {
          compKey: 'compKey7',
          span: 24,
          isComponent: true,
          label: '驳回原因：',
          isRequire: true,
          codeField: 'zbRejectReason',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          sendCode: () => { },
          focusCode: () => { },
          changeCode: (val) => {
            this.dynamicFieldsData.zbRejectReason = val
          },
          isMust: true
        }
      ],
      // form 的表单对象
      dynamicFieldsData: {
        jfdId: this.dataForForm.jfdId,
        vin: this.dataForForm.vin,
        assignNo: this.dataForForm.assignNo,
        updateControlId: this.dataForForm.updateControlId,
        zbRejectReason: ''
      },
      // 动态组件-按钮
      dynamicButtons: [
        {
          name: 'save',
          text: '确定',
          clickEvent: () => { this.save() },
          position: 'right',
          isMust: false,
          type: 'primary'
        },
        {
          name: 'cancel',
          text: '取消',
          clickEvent: () => this.closeEdit(),
          position: 'right'
        }
      ]
    }
  },
  mounted() {
  },
  methods: {
    // form表单组件每个元素所占栅格栏数每行24格
    spanNum() {
      return 24
    },

    // 关闭弹窗
    closeEdit(type) {
      this.$emit('close', type)
    },

    // 表单数据初始化
    // 保存
    save() {
      if (this.dynamicFieldsData.zbRejectReason === '') { this.$message('请填写驳回原因！'); return }
      // console.log(this.dynamicFieldsData)
      // this.$emit('save', this.dynamicFieldsData)
      this.reject(this.dynamicFieldsData)
    },
    // 驳回
    reject(res) {
      const that = this
      const queryObj = {
        // api配置
        apiConfig: orgApis.deliveryPlaceChangeHQReject,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: {
          // 当前中台使用的名称有dataInfo、info，具体查看API文档
          dataInfo: res
        }
      }
      // 转换了中台请求格式数据
      var paramD = that.$getParams(queryObj)
      // 调用中台API方法（可复用）
      that.$requestAPI(paramD).then(response => {
        this.$message({
          message: response.msg,
          duration: 2000
        })
        if (response.result === '1') {
          this.closeEdit('1')
        }
      })
    }
  }
}
</script>

